<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
  <title>第五步：层先法自动还原魔方</title>
  <script type="text/javascript" src="./threejs/three.js"></script>
  <script type="text/javascript" src="./threejs/controls/OrbitControls.js"></script>
  <link rel="stylesheet" href="./reset.import.css">
  <link rel="stylesheet" href="./rubik.css">
  <!-- <style type="text/css" > -->

  <style>
    #beam2 {
      width: 400px;
      height: 400px;

      /* width: 800px;
      height: 800px; */

      background: yellow;
      /* 注释掉了  图还是没有画出来 */
    }
  </style>
</head>

<!-- onload="threeStart();" -->

<body>

  <!-- <canvas id="myCanvas" width="700" height="410">
    <p>Some 一些默认的内容。</p>
  </canvas>
  <p>三角形!</p> -->

  <!-- <canvas id="beam"></canvas> -->

  <!-- <ul class="btn-list">
        <li><button id="autoResetV1">自动还原</button></li>
        <li><button id="randomRotate">随机旋转</button></li>
        <li>
            <p class="error"></p>
        </li>
    </ul> -->
  <!-- <div id="canvas-frame"></div> -->

  <!-- <div id="beam2" style="top:0px;left:0px;z-index: 4;"></div> -->

  <!-- top:0px;left:0px; -->
  <canvas id="beam2" width="450" height="450" style="z-index: 10000;"></canvas>

  <!-- <div id="beam2" style="top:0px;left:0px"></div> -->
  <!-- <script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script> -->
  <!-- <script src="http://cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script> -->

  <!-- <script>
        eruda.init();
    </script>
    <script src="rubik.js">
        // eruda.init();
    </script> -->


  <!-- <script src="beam/beam.js"></script> -->


  <script src="jquery.min.js"></script>

  <script>
    // JavaScript for drawing on canvas
    // applying colors + three triangles

    (function () {


      class Point {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
      }
      class Drawer {
        constructor(canvas) {
          this.canvas = canvas
          this.ctx = canvas.getContext('2d');
          //获取canvas容器
          // var can = document.getElementById('canvas');
          // //创建一个画布
          // var ctx = can.getContext('2d');
          // canvas 画图 在 div 上面
        }

        drawTriangle(x1, y1, x2, y2, x3, y3, color, type) {
          var ctx = this.ctx
          console.log("drawTriangle");
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.lineTo(x3, y3);
          ctx[type + 'Style'] = color;
          ctx.closePath();
          ctx[type]();
        }

        // 名字取错了 这里是画三角形
        drawCircle(x1, y1, x2, y2, x3, y3, color, type) {
          var ctx = this.ctx
          console.log("drawCircle");
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.lineTo(x3, y3);
          ctx[type + 'Style'] = color;
          ctx.closePath();
          ctx[type]();
        }

        // 不能 重载吧
        // drawCircleByPoints
        // drawCircle
        drawCircleByPoints(point1, point2, point3, color, type) {
          // this.   要
          console.log("point1");
          console.log(point1);

          console.log("point2");
          console.log(point2);


          console.log("point3");
          console.log(point3);
          this.drawCircle(point1.x, point1.y,

            point2.x, point2.y,
            point3.x, point3.y, color, type)
          // var  ctx=  this.ctx 
          //   ctx.beginPath();
          //   ctx.moveTo(x1, y1);
          //   ctx.lineTo(x2, y2);
          //   ctx.lineTo(x3, y3);
          //   ctx[type + 'Style'] = color;
          //   ctx.closePath();
          //   ctx[type]();
        }

        //       var drawCircle = function(x1, y1, x2, y2, x3, y3, color, type) {
        //     ctx.beginPath();
        //     ctx.moveTo(x1, y1);
        //     ctx.lineTo(x2, y2);
        //     ctx.lineTo(x3, y3);
        //     ctx[type + 'Style'] = color;
        //     ctx.closePath();
        //     ctx[type]();
        // }

      }

      // var canvasId = 'myCanvas'
      // // var can = document.getElementById('canvas');
      // var myCanvas = document.getElementById(canvasId);
      // // 因为这不是在 beam2 上画画。。
      // drawer = new Drawer(myCanvas)

      // drawCircleByPoints
      // drawCircle
      // drawCircleByPoints
      // drawCircle



      // var drawCircle = function (x1, y1, x2, y2, x3, y3, color, type) {
      //   ctx.beginPath();
      //   ctx.moveTo(x1, y1);
      //   ctx.lineTo(x2, y2);
      //   ctx.lineTo(x3, y3);
      //   ctx[type + 'Style'] = color;
      //   ctx.closePath();
      //   ctx[type]();
      // }

      // 获取设备像素比
      var devicePixelRatio = window.devicePixelRatio
      console.log("devicePixelRatio");
      console.log(devicePixelRatio);
      //     devicePixelRatio
      // beam2.html:186 1.125
      // https://zhuanlan.zhihu.com/p/31426945
      var beam2 = document.getElementById("beam2");
      var beam2Canvas = beam2
      drawer = new Drawer(beam2Canvas)
      let emlLeft = getElementLeft(beam2)
      let emlTop = getElementTop(beam2)
      console.log("emlLeft");
      console.log(emlLeft);

      console.log("emlTop");
      console.log(emlTop);
      // 可以
      // canvas 很糊

      // var top=emlTop
      // var left=emlLeft

      // top 可能已经被定义为 win 的某个东西
      // 所以 就要用匿名函数了
      // let top=emlTop
      // let left=emlLeft

      // console.log("emlTop");
      // console.log(emlTop);

      // console.log("emlLeft");
      // console.log(emlLeft);
      // left 是x

      // drawer.drawCircleByPoints(new Point(emlTop, emlLeft),
      //   new Point(emlTop + 50, emlLeft + 50),
      //   new Point(emlTop + 100, emlLeft + 50),
      //   "green", "fill"
      // )


      // drawer.drawCircleByPoints(new Point(emlLeft, emlTop),
      //   new Point(emlLeft + 50, emlTop + 50),
      //   new Point(emlLeft + 100, emlTop + 50),
      //   "green", "fill"
      // )

      // drawer.drawCircleByPoints(new Point(emlLeft, emlTop),
      //   new Point(emlLeft + 1, emlTop + 1),
      //   new Point(emlLeft + 2, emlTop + 4),
      //   "green", "fill"
      // )

      // 写错了 这是 三角形。。。
      // drawer.drawCircleByPoints(new Point(emlLeft, emlTop),
      //   new Point(emlLeft + 10, emlTop + 10),
      //   new Point(emlLeft + 20, emlTop + 40),
      //   "green", "fill"
      // )

      // 这两个反了 就可以画 啊
      // 就是这个位置不行了 上面点 还行的
      // 一切错误的根源是我指定错 canvas 的位置了
      // emlLeft
      // emlTop-=50;
      // emlTop-=100;
      // emlTop-=441;
      // drawer.drawTriangle(emlLeft, emlTop,
      //  emlLeft + 10, emlTop + 10,
      //  emlLeft + 20, emlTop + 40,
      //   "green", "fill"
      // )


      // function drawIt(topShifting) {

      //   console.log("topShifting");
      //   console.log(topShifting);
      //   setTimeout(() => {
      //     // topShifting += 20
      //     drawer.drawTriangle(emlLeft, emlTop,
      //       emlLeft + 500, emlTop,
      //       emlLeft + 500, emlTop + topShifting,
      //       "green", "fill"
      //     )
      //   }, 1000)


      // }

      function drawIt(i) {
          setTimeout(function timer() {
            // console.log(i);
           var topShifting=i*20;
            drawer.drawTriangle(emlLeft, emlTop,
              emlLeft + 500, emlTop,
              emlLeft + 500, emlTop + topShifting,
              "green", "fill"
            )
          }, i * 1000);
        }


      let topShifting = 0
      console.log("topShifting");
      console.log(topShifting);
      for (let i = 0; i < 5; i++) {
        // setTimeout(() => {
        //   topShifting += 20
        //   drawer.drawTriangle(emlLeft, emlTop,
        //     emlLeft + 500, emlTop,
        //     emlLeft + 500, emlTop + topShifting,
        //     "green", "fill"
        //   )
        // },1000)

        topShifting += 20;
        // 不写 ; 会被当做函数 20 

      //   console.log("topShifting");
      // console.log(topShifting);
        // https://www.cnblogs.com/lvhw/p/6507516.html
        // (setTimeout(function (i) {

        //   drawer.drawTriangle(emlLeft, emlTop,
        //     emlLeft + 500, emlTop,
        //     emlLeft + 500, emlTop + topShifting,
        //     "green", "fill"
        //   )
        // }, 1000))(topShifting)

        // (drawIt)(topShifting)

        // (function (i) {
        //     setTimeout(() => {

        //       drawer.drawTriangle(emlLeft, emlTop,
        //         emlLeft + 500, emlTop,
        //         emlLeft + 500, emlTop + topShifting,
        //         "green", "fill"
        //       )
        //     }, 1000)(topShifting)

        //     // setTimeout((function())())

        // (function (topShifting) {
        //   setTimeout(function timer() {
        //     // console.log(i);
        //     drawer.drawTriangle(emlLeft, emlTop,
        //       emlLeft + 500, emlTop,
        //       emlLeft + 500, emlTop + topShifting,
        //       "green", "fill"
        //     )
        //   }, 1000);
        // })(topShifting);

        // 可以画了
        // (function (i) {
        //   setTimeout(function timer() {
        //     // console.log(i);
        //    var topShifting=i*20;
        //     drawer.drawTriangle(emlLeft, emlTop,
        //       emlLeft + 500, emlTop,
        //       emlLeft + 500, emlTop + topShifting,
        //       "green", "fill"
        //     )
        //   }, i * 1000);
        // })(i);


        // (drawIt)(i);
        // 可以

        drawIt(i);
        // 也可以

        // (function (i) {
        //   setTimeout(function timer() {
        //     console.log(i);
        //   }, i * 1000);
        // })(i);

      }





      // https://blog.csdn.net/qq_44204058/article/details/111603579

      // canvas  在上层
      // var x=40
      // var x=0
      // // var y=50
      // var y=400
      // drawer.drawTriangle(x, y,
      // x + 10, y + 10,
      // x + 20, y + 40,
      //   "green", "fill"
      // )




      function getTopLeftFail() {

        // 这里 style 不配置的话 就没有
        var top = beam2.style.top;
        var left = beam2.style.left;
        //    var top=document.getElementById["div1"].style.top;
        // var left=document.getElementById["div1"].style.left;


        // drawer.drawCircleByPoints(new Point(0, 50),
        //   new Point(75, 75),
        //   new Point(50, 100),
        //   "green", "fill"
        // )

        console.log("top");
        console.log(top);
        console.log("beam2");
        console.log(beam2);
        console.log("beam2.style");
        console.log(beam2.style);

        console.log("top");
        console.log(top + "");

        console.log("beam2.style.top");
        console.log(beam2.style.top);
        // 读不到 空的

        //     var myCanvasDom =   $("#"+canvasId)
        //     // https://jingyan.baidu.com/article/29697b91e53ef3eb20de3cee.html
        //   top=  myCanvasDom.offset().top
        //  left=   myCanvasDom.offset().left

        drawer.drawCircleByPoints(new Point(top, left),
          new Point(top + 50, left + 50),
          new Point(top + 100, left + 50),
          "green", "fill"
        )


      }

      // http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
      // 成功
      function getElementLeft(element) {
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;

        while (current !== null) {
          actualLeft += current.offsetLeft;
          current = current.offsetParent;
        }

        return actualLeft;
      }

      function getElementTop(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;

        while (current !== null) {
          actualTop += current.offsetTop;
          current = current.offsetParent;
        }

        return actualTop;
      }


      function getTopLeft() {
        var myCanvasDom = $("#" + canvasId)
        // https://jingyan.baidu.com/article/29697b91e53ef3eb20de3cee.html
        var top = myCanvasDom.offset().top
        var left = myCanvasDom.offset().left
        // 还是获得了 window
        // 好像不是哦 只要 var top  var 了就是正常 感觉
        console.log("getTopLeft");

        console.log("top");
        console.log(top);

        console.log("left");
        console.log(left);
        // 但是 他是 0 0 但是他不是画布的位置吧
        // drawer.drawCircleByPoints(new Point(top, left),
        //   new Point(top + 50, left + 50),
        //   new Point(top + 100, left + 50),
        //   "green", "fill"
        // )



      }

      // top =
      // drawer.drawCircleByPoints(new Point(0, 0),
      //   new Point(50, 50),
      //   new Point(100, 50),
      //   "green", "fill"
      // )

      // drawer.drawCircle(0, 0,
      //   50, 50,
      //   100, 50,
      //   "green", "fill"
      // )

      // getTopLeft()
      //  beam2.
      // div 的左上角
      // https://blog.csdn.net/caidadong/article/details/49249237
      function draw() {
        // canvas with id="myCanvas"
        var canvas = document.getElementById('myCanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.beginPath(); // note usage below 

          // triangle 1, at left
          ctx.fillStyle = "#F9A520";
          ctx.moveTo(0, 0); // start at top left corner of canvas
          ctx.lineTo(200, 0); // go 200px to right (x), straight line from 0 to 0
          ctx.lineTo(100, 200); // go to horizontal 100 (x) and vertical 200 (y)
          ctx.fill(); // connect and fill

          // triangle 2, top center
          ctx.moveTo(300, 0); // pick up "pen," reposition at 300 (horiz), 0 (vert)
          ctx.lineTo(300, 200); // draw straight down (from 300,0) to 200px
          ctx.lineTo(500, 100); // draw up toward right (100 half of 200)
          ctx.fill(); // connect and fill

          // triangle 3, bottom center
          ctx.beginPath(); // note: w/o this, color does not work as expected 
          ctx.fillStyle = "#F00";
          ctx.moveTo(300, 200); // pick up "pen," reposition at 300 (horiz), 200 (vert)
          ctx.lineTo(300, 400); // draw straight down by 200px (200 + 200)
          ctx.lineTo(100, 300); // draw up toward left (100 less than 300, so left)
          ctx.fill(); // connect and fill

          // triangle 4, at right, top
          ctx.beginPath();
          ctx.strokeStyle = "#00F";
          ctx.moveTo(600, 0); // pick up "pen," reposition at 500 (horiz), 0 (vert)
          ctx.lineTo(500, 200); // draw straight down by 200px (200 + 200)
          ctx.lineTo(700, 200); // draw up toward left (100 less than 300, so left)
          ctx.closePath(); // connect end to start
          ctx.stroke(); // outline the shape that's been described

          // triangle 5, at right, bottom
          ctx.beginPath();
          ctx.strokeStyle = "#096";
          ctx.moveTo(500, 210); // pick up "pen," reposition 
          ctx.lineTo(700, 210); // draw straight across to right
          ctx.lineTo(600, 410); // draw down toward left
          ctx.closePath(); // connect end to start
          ctx.stroke(); // outline the shape that's been described

        }
      }

      // 这里把那块小的 覆盖了 可能是 ctx 没有刷新之类的
      // 反正先注释掉
      // draw();

    })();
  </script>
</body>

</html>